<template>
  <div style="margin-top:16px;background-color:#ffffff;border-radius: 6px;padding:20px">
    <!-- <a-space class="operator" style="margin-bottom:20px;">
      <a-button type="primary">新建单元</a-button>
    </a-space> -->
    <standard-table
      :loading='loading'
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
      @clear="onClear"
      @change="onChange"
    >
      <div slot="status" slot-scope="{record}">
        <div style="display:flex;align-items: center;">
          <div style="width:6px;height:6px;border-radius:50%;background-color:#00cc63" v-if="record.status==0"></div>
          <div style="width:6px;height:6px;border-radius:50%;background-color:#ff7875" v-else></div>
          <span style="margin-left:5px">{{record.status | setStatus}}</span>
        </div>
      </div>
      <div slot="ocpcBid" slot-scope="{record}">
        <div style="display:flex;align-items: center;">
          <span>{{record.ocpc.ocpcBid.toFixed(2)}}</span>
        </div>
      </div>
      <div slot="subject" slot-scope="{record}">
        <div style="display:flex;align-items: center;">
          <span style="margin-left:5px">{{record.subject | setSubject}}</span>
        </div>
      </div>
      <div slot="action" slot-scope="{record}" @click="edit(record)">
        <!-- <a style="margin-right: 8px">
          <a-icon type="edit"/>编辑
        </a> -->
        <a-popconfirm title="确定删除？" ok-text="删除" cancel-text="取消" @confirm='deleteRecord(record.adgroupFeedId)'>
          <a href="javascript:;">
            <a-icon type="delete" />删除
          </a>
        </a-popconfirm>
      </div>
    </standard-table>
  </div>
</template>

<script>
import StandardTable from '@/components/table/StandardTable'
import { getAdgroupFeed,deleteAdgroupFeed } from '@/api/xinxiliu/danyuan'

export default {
  name:'danyuanView',
  data(){
    return{
      dataSource:[],
      selectedRows:[],
      loading:false,
      columns:[
        {
          title: '推广单元',
          // width:240,
          fixed:'left',
          dataIndex: 'adgroupFeedName',
          // defaultSortOrder: 'descend',
          sorter: (a, b) => new Date(a.addtime).valueOf() - new Date(b.addtime).valueOf(),
        },
        {
          title: '出价（元）',
          dataIndex: 'ocpcBid',
          scopedSlots: { customRender: 'ocpcBid' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          fixed:'right',
          width:'100',
          scopedSlots: { customRender: 'action' }
        },
      ]
    }
  },
  props:{
    campaignFeedId: {
      type:[Number,String],
      default:0
    }
  },
  created(){
    // console.log('create-danyuanview',this.campaignFeedId)
    this.getDanyuan(this.campaignFeedId)
  },
  methods:{
    getDanyuan(id){
      console.log('watch-danyuanView',id)
      this.loading = true;
      const _this = this;
      let params = {
        ids:[id],
        idType:1 // 1 - 计划类型 2 - 单元类型
      }
      getAdgroupFeed(params).then((e) => {
        _this.loading = false;
        if(e.errcode == 0){
          let data = e.data.body.data
          let key = 1
          for(let i of data){
            i.key = key
            key++;
          }
          _this.dataSource = data
          console.log(data)
        }
      })
    },
    onSelectChange(e){
      console.log('onSelectChange',e)
    },

    edit(){

    },
    deleteRecord(adgroupFeedId){
      const _this = this;
      const hideLoding = _this.$message.loading('删除中')
      deleteAdgroupFeed({adgroupFeedIds:adgroupFeedId}).then((e) => {
        if(e.errcode == 0){
          hideLoding()
          _this.$message.success('删除成功')
          _this.getDanyuan(_this.campaignFeedId)
        }
      });
    },
    selectedRowChange(selectedRowKeys, selectedRows){
      console.log('selectedRowChange',selectedRowKeys, selectedRows)
    },
    onChange(e){
      console.log('onChange',e)
    },
    onClear(e){
      console.log('onClear',e)
    },
  },
  watch:{
    campaignFeedId(e){
      this.getDanyuan(e)
    }
  },
  filters:{
    setStatus(e){
      switch(e){
        case 0: case '0':
          return '有效'
        case 1: case '1':
          return '暂停推广'
        case 2: case '2':
          return '推广计划暂停推广'
      }
    },
    setSubject(e){
      switch(e){
        case 1: case '1':
          return '网站链接'
        case 2: case '2':
          return '应用下载（IOS）'
        case 3: case '3':
          return '应用下载（Android）'
        case 7: case '7':
          return '电商店铺'
      }
    }
  },
  components:{
    StandardTable,
  }
}
</script>

<style lang="less" scoped>
  
</style>